<template>
  <div class="box">
    <!-- input输入框 -->
    <div
      v-if="type == 'input'"
      :class="[search ? 'box-left-search' : 'box-left']"
    >
      <span v-if="!star">{{ keyword }}</span>
      <el-input v-else ref="inp" v-model="keyword" size="medium" />
    </div>
    <!-- select下拉框 -->
    <div
      v-if="type == 'select'"
      :class="[search ? 'box-left-search' : 'box-left']"
    >
      <span v-if="!star">{{ option2val }}</span>
      <el-select v-else v-model="keyword" size="medium">
        <el-option
          v-for="(item, inx) in options"
          :key="inx"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <!-- 右边的按钮操作 -->
    <div class="box-right">
      <i v-if="star && search" class="el-icon-search" @click="searchClick"></i>
      <i v-if="!star" class="ri-tools-line" @click="focus"></i>
      <i v-if="!star" class="hover vab-dropdown" @click="focus" />
      <i v-if="star" class="hover ri-tools-line" @click="submit"></i>
    </div>
  </div>
</template>
<script>
  import { computed, ref } from 'vue'
  export default defineComponent({
    props: {
      // 参数
      value: {
        type: String,
        default: null,
      },
      // 类型
      type: {
        type: String,
        default: null,
      },
      // 如果是select下拉
      options: {
        type: Array,
        default: () => [],
      },
      // 是否需要搜索按钮
      search: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['on-surefn', 'change', 'search-click'],
    setup(props, { emit }) {
      const state = reactive({
        keyword: props.value,
        star: false,
      })
      const inp = ref('')
      const option2val = computed({
        // 下拉框返回的值需要处理一下
        option2val() {
          const res = props.options.find((item) => item.value == state.keyword)
          return res && res.label ? res.label : ''
        },
      })

      const focus = () => {
        state.star = true
        console.log(inp.value)
        if (props.type == 'input') {
          //   要等dom先变化后才能拿到ref
          nextTick(() => {
            inp.value.focus()
          })
        }
      }
      const submit = () => {
        if (props.type == 'input')
          state.keyword = state.keyword ? state.keyword : 1
        state.star = false
        emit('change', state.keyword)
      }
      const searchClick = () => {
        emit('search-click')
      }
      return {
        ...toRefs(state),
        option2val,
        focus,
        submit,
        searchClick,
        inp,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
    overflow: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .box-left-search {
    width: calc(100% - 40px);
  }
  .box-left {
    width: calc(100% - 22px);
  }
  .box-right {
    flex: 1;
  }
  .box-right i {
    margin-left: 5px;
  }
  .box .hover {
    display: none;
  }
  .box:hover .hover {
    display: inline;
  }

</style>
